<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>p10_溢出问题</title>
    <style>
        .txt {
            background-color: yellow;
            width: 200px;
            /* 以下三句代码是组合代码,缺一不可! */
            white-space: nowrap; /* 强制文本不换行 */
            overflow: hidden; /* 溢出部分隐藏 */
            text-overflow: ellipsis; /* 文字溢出替换为省略号 */
        }
        .overflow {
            background-color: lightcoral;
            /* 注意:溢出的前提一定是限制父元素的大小! */
            width: 200px;
            height: 2500px;
            overflow: visible;/* 默认值 溢出可见 */
            overflow: hidden;/* 溢出隐藏 多余的部分直接裁掉 */
            overflow: scroll;/* 无论是否溢出,两个方向都显示拖拽条*/
            overflow: auto;/* 只有溢出的方向才会自动显示拖拽条 */
        }
    </style>
</head>
<body>
    <div class="txt" title="Lorem ipsum dolor sit amet, consectetur adipisicing elit.">
        Lorem ipsum dolor sit amet, consectetur adipisicing elit. At commodi eaque enim inventore ipsam mollitia quibusdam sed totam. Animi corporis facere fugiat, minus nobis nulla quibusdam quis rem unde voluptatem!
    </div>
    <div class="overflow">
        <img src="../2.png">
        <img src="../2.png">
        <img src="../2.png">
    </div>
</body>
</html>